<template>
  <div>
    <head-top></head-top>
    <section class="data_section">
      <header class="section_title">数据统计</header>
      <el-row :gutter="20" style="margin-bottom: 10px;">
        <el-col :span="4">
          <div class="data_list today_head">
            <span class="data_num head">当日数据：</span>
          </div>
        </el-col>
        <!-- <el-col :span="4">
          <div class="data_list">
            <span class="data_num">{{userCount}}</span> 新增用户
          </div>
        </el-col>-->
        <el-col :span="4">
          <div class="data_list">
            <span class="data_num">{{0}}</span> 新增订单
          </div>
        </el-col>
        <!-- <el-col :span="4">
          <div class="data_list">
            <span class="data_num">{{adminDayCount}}</span> 新增管理员
          </div>
        </el-col>
        <el-col :span="4">
          <div class="data_list">
            <span class="data_num">{{shopDayCount || 0}}</span> 新增店铺
          </div>
        </el-col>-->
        <el-col :span="4">
          <div class="data_list">
            <span class="data_num">{{0}}</span> 新增商品
          </div>
        </el-col>
        <el-col :span="4">
          <div class="data_list">
            <span class="data_num">{{0}}</span> 新增收入
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="data_list all_head">
            <span class="data_num head">总数据：</span>
          </div>
        </el-col>
        <!-- <el-col :span="4">
          <div class="data_list">
            <span class="data_num">{{allUserCount}}</span> 注册用户
          </div>
        </el-col>-->
        <el-col :span="4">
          <div class="data_list">
            <span class="data_num">{{0}}</span> 订单
          </div>
        </el-col>
        <!-- <el-col :span="4">
          <div class="data_list">
            <span class="data_num">{{allAdminCount}}</span> 管理员
          </div>
        </el-col>
        <el-col :span="4">
          <div class="data_list">
            <span class="data_num">{{allResturantsCount}}</span> 店铺
          </div>
        </el-col>-->
        <el-col :span="4">
          <div class="data_list">
            <span class="data_num">{{0}}</span> 商品
          </div>
        </el-col>
        <el-col :span="4">
          <div class="data_list">
            <span class="data_num">{{0}}</span> 收入
          </div>
        </el-col>
      </el-row>
      <br />
      <br />
      <header class="section_title">
        <span style="font-size:20px">选择日期</span>
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </header>
    </section>
    <tendency :sevenDate="sevenDate" :sevenDay="sevenDay"></tendency>
  </div>
</template>

<script>
import headTop from "../components/headTop";
import tendency from "../components/tendency";
import dtime from "time-formater";
import {
  userDayCount, //单日
  getUserCount, //全部
  orderDayCount,
  getOrderCount,
  adminDayCount,
  getAdminCount,
  shopDayCount,
  getResturantsCount,
  foodDayCount,
  getFoodsCount,
} from "@/api/getData";
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * (7 - 1));
              picker.$emit("pick", [start, end]);
              this.days = 7;
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * (30 - 1));
              picker.$emit("pick", [start, end]);
              this.days = 30;
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * (90 - 1));
              picker.$emit("pick", [start, end]);
              this.days = 90;
            },
          },
        ],
      },
      value2: "",
      //
      userDayCount: null,
      orderDayCount: null,
      adminDayCount: null,
      shopDayCount: null,
      foodDayCount: null,
      allUserCount: null,
      allOrderCount: null,
      allAdminCount: null,
      allResturantsCount: null,
      sevenDay: [],
      sevenDate: [[], [], [], [], []],
      allFoodsCount: null,
      days: 7 * 2,
      incomeDayCount: null,
      allIncomeCount: null,
    };
  },
  components: {
    headTop,
    tendency,
  },
  mounted() {
    this.restaurant_id = this.$route.query.restaurant_id;
    this.initData();
    for (let i = this.days - 1; i > -1; i--) {
      const date = dtime(new Date().getTime() - 86400000 * i).format(
        "YYYY-MM-DD"
      );
      this.sevenDay.push(date);
    }
    this.getSevenData();
  },
  computed: {
    update() {
      for (let i = this.days - 1; i > -1; i--) {
        const date = dtime(new Date().getTime() - 86400000 * i).format(
          "YYYY-MM-DD"
        );
        this.sevenDay.push(date);
      }
      this.getSevenData();
    },
  },
  methods: {
    async initData() {
      // 获取商品总量
      try {
        const countData = await getFoodsCount({
          restaurant_id: this.restaurant_id,
        });
        if (countData.status == 1) {
          this.allFoodsCount = countData.count;
        } else {
          throw new Error("获取数据失败");
        }
        // this.getFoods();
      } catch (err) {
        console.log("获取数据失败", err);
      }
      // 其它数据获取
      const today = dtime().format("YYYY-MM-DD");
      Promise.all([
        userDayCount(today),
        orderDayCount(today),
        adminDayCount(today),
        getUserCount(),
        getOrderCount(),
        adminDayCount(),
        getResturantsCount(),
        shopDayCount(today),
        foodDayCount(today),
      ])
        .then((res) => {
          this.userDayCount = res[0].count;
          this.orderDayCount = res[1].count;
          this.adminDayCount = res[2].count;
          this.allUserCount = res[3].count;
          this.$store.state.user.count = this.allUserCount;
          this.allOrderCount = res[4].count;
          this.allAdminCount = res[5].count;
          this.allResturantsCount = res[6].count;
          this.shopDayCount = res[7].count;
          this.foodDayCount = res[8].count;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async getSevenData() {
      const apiArr = [[], [], [], [], []];
      this.sevenDay.forEach((item) => {
        apiArr[0].push(userDayCount(item));
        apiArr[1].push(orderDayCount(item));
        apiArr[2].push(adminDayCount(item));
        apiArr[3].push(shopDayCount(item));
        apiArr[4].push(foodDayCount(item));
      });
      const promiseArr = [
        ...apiArr[0],
        ...apiArr[1],
        ...apiArr[2],
        ...apiArr[3],
        ...apiArr[4],
      ];
      Promise.all(promiseArr)
        .then((res) => {
          const resArr = [[], [], [], [], []];
          res.forEach((item, index) => {
            if (item.status == 1) {
              resArr[Math.floor(index / this.days)].push(item.count);
            }
          });
          this.sevenDate = resArr;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less">
@import "../style/mixin";
.data_section {
  padding: 20px;
  margin-bottom: 40px;
  .section_title {
    text-align: center;
    font-size: 30px;
    margin-bottom: 10px;
  }
  .data_list {
    text-align: center;
    font-size: 14px;
    color: #666;
    border-radius: 6px;
    background: #e5e9f2;
    .data_num {
      color: #333;
      font-size: 26px;
    }
    .head {
      border-radius: 6px;
      font-size: 22px;
      padding: 4px 0;
      color: #fff;
      display: inline-block;
    }
  }
  .today_head {
    background: #ff9800;
  }
  .all_head {
    background: #20a0ff;
  }
}
.wan {
  .sc(16px, #333);
}
</style>
